<template>
  <el-tabs ref="wholeSales" v-model="activeName" type="card" @tab-click="tabChange">
    <el-tab-pane v-if="$hasTabPermission(30301)" label="瓶批业务" name="bottle">
      <tab-bottle ref="bottle" />
    </el-tab-pane>
    <el-tab-pane v-if="$hasTabPermission(30302)" label="槽批业务" name="lorry">
      <tab-lorry ref="lorry" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import TabBottle from './TabBottle'
  import TabLorry from './TabLorry'

  export default {
    name: 'wholeSales',
    components: {
      TabBottle, TabLorry
    },
    data() {
      return {
        activeName: 'bottle'
      }
    },
    mounted() {
      this.activeName = this.$refs.wholeSales.panes.length > 0 ? this.$refs.wholeSales.panes[0].name : ''
    },
    methods: {
      tabChange() {
        this.$refs[this.activeName].flexColumnWidth()
      }
    }
  }
</script>

<style scoped>

</style>
